import React, { useEffect, useState } from 'react';
// 引入搜索组件
import Mysearch from '@/components/Mysearch';
// 引入轮播图组件
import Myswiper from '@/components/Myswiper';
// 引入接口
import { getSwiperApi, getSeckillApi, getProlistApi } from '@/api/home'
// 引入导航菜单组件
import Mynavmenu from '@/components/Mynavmenu';
// 引入京东秒杀
import Seckill from '@/components/Seckill';
// 引入产品列表组件
import Productlist from '@/components/Productlist';
// 引入antd 组件 
import { InfiniteScroll, DotLoading, PullToRefresh } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'

const Home = () => {
    // 定义轮播图数组
    const [swiperArr, setSwiperArrFn] = useState([])
    // 定义秒杀数据
    const [seckillArr, setSecKillArrFn] = useState([])
    // 定义产品列表当前页
    const [count, setCount] = useState(1)
    // 定义产品列表每页数据的条数
    const [limitNum, setLimitNumFn] = useState(10)
    // 定义产品列表数组
    const [prolist, setProListFn] = useState([])
    // 定义是否有更多 为boolean
    const [hasMore, setHasMore] = useState(true)

    // 自定义触底文案组件
    const InfiniteScrollContent = ({ hasMore }) => {
        return (
            <>
                {hasMore ? (
                    <>
                        <span>Loading</span>
                        <DotLoading />
                    </>
                ) : (
                    <span>--- 我是有底线的 ---</span>
                )}
            </>
        )
    }

    async function loadMore() {
        // 将页面count+1 
        setCount(count + 1) //  setCount(count + 1) 修改是异步的, 修改完直接获取值为上一次的值
        console.log('loadMore-count', count); //1 ,2,3,4,,5
        const append = await getProlistApi({ count, limitNum })
        setProListFn(val => [...val, ...append.data.data])
        setHasMore(append.data.data.length > 0)
    }
    useEffect(() => {
        // 请求轮播图
        getSwiperApi().then(res => {
            // console.log('res', res);
            setSwiperArrFn(res.data.data)
        })
        //请求秒杀
        getSeckillApi().then(res => {
            // console.log(res);
            setSecKillArrFn(res.data.data)
        })
        // 请求产品列表数据
        // getProlistApi({ count, limitNum }).then(res => {
        //     console.log(res);
        //     setProListFn(res.data.data)
        // })
    }, [])
    return (
        <div className='home' style={{
            paddingBottom: '50px'
        }}>
            {/* 搜索框组件 */}
            <Mysearch></Mysearch>
            <PullToRefresh onRefresh={async () => {
                await sleep(1000)
                setProListFn([])
                setHasMore(true)
                loadMore()
            }}>
                {/* 轮播图组件 */}
                {
                    swiperArr.length > 0 ? <Myswiper swiperArr={swiperArr}></Myswiper> : null
                }
                {/* 导航菜单组件 */}
                <Mynavmenu></Mynavmenu>
                {/*京东秒杀  */}
                <Seckill seckillArr={seckillArr}></Seckill>
                {/* 菜单列表 */}
                <Productlist prolist={prolist}></Productlist>

                {/* 设置无线滚动 */}
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                    <InfiniteScrollContent hasMore={hasMore} />
                </InfiniteScroll>
            </PullToRefresh>
        </div>
    );
}

export default Home;
